import React, { useState, useEffect } from 'react';
import {
  Table,
  Radio,
  Button,
  Select,
  Input,
  Form,
  DatePicker,
  Upload,
  message,
  Modal,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { history } from 'umi';
import request from '../../../../http';
import './index.css';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const LeaveApplication = () => {
  const columns = [
    {
      title: '操作人',
      dataIndex: '操作人',
      key: '1',
    },
    {
      title: '操作事项',
      dataIndex: '操作事项',
      key: '2',
    },
    {
      title: '事项状态',
      dataIndex: '事项状态',
      key: '3',
    },
    {
      title: '操作时间',
      dataIndex: '操作时间',
      key: '4',
    },
    {
      title: '说明',
      dataIndex: '说明',
      key: '5',
    },
  ];
  //填写数据
  const [zhuTi, setzhuTi] = useState('');
  const [startDate, setstartDate] = useState('');
  const [endDate, setendDate] = useState('');
  const [reason, setreason] = useState('');
  const [file, setfile] = useState('');
  //获取传过来的数据
  const leaveInfoId = history.location.query.leaveInfoId;
  const state = history.location.query.state;
  //定义表格data数据
  const [data, setdata] = useState([{}]);
  //学生信息
  const [student, setstudent] = useState([{}]);
  //获取审批不通过的原因
  const [gReason, setgReason] = useState(0);

  //周期搜索
  useEffect(() => {
    //学生信息
    request
      .post('/ack/teacher/teacherDetails', {
        leaveInfoId: leaveInfoId,
      })
      .then((res) => {
        // console.log("学生信息请求成功", res)
        const receivedData = res.data;
        const newData = [
          {
            操作人: receivedData.accountId,
            操作事项: receivedData.operationalMatters,
            事项状态: receivedData.operationtime,
            操作时间: receivedData.operationtime,
            说明: receivedData.failPassExplain,
          },
        ];
        setstudent(receivedData);
        setdata(newData);
      });
  }, []);

  //文件上传
  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        //上传成功发送请求
        request.post('/common/a_t_s/upload').then((res) => {
          console.log('学生信息请求成功', res);
        });
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  //获取开始日期
  const startDateChange = (date, dateString) => {
    setstartDate(dateString);
  };

  //获取结束日期
  const endDateChange = (date, dateString) => {
    setendDate(dateString);
  };

  //获取单选框的值
  const onChangeRadio = (e) => {
    // console.log(e.target.value)
    setreason(e.target.value);
  };

  //获取请假原因
  const onChangeText = (e) => {
    // console.log(e.target.value)
  };

  //取消返回
  const back = () => {
    history.push('/teacher/absence/index');
  };

  //审批通过
  const Approved = () => {
    //审批通过
    console.log(leaveInfoId, state);
    request
      .post('/ack/teacher/approved', {
        leaveInfoId: leaveInfoId,
        state: state,
      })
      .then((res) => {
        console.log('审批通过成功', res);
        if (res.message == '审批通过') {
          alert(res.message);
          history.push({
            pathname: '/teacher/absence/index',
          });
        } else {
          alert(res.message);
          history.push({
            pathname: '/teacher/absence/index',
          });
        }
      });
  };

  const FApproved = () => {
    setIsModalVisible(true);
  };

  //审批不通过
  const [isModalVisible, setIsModalVisible] = useState(false);
  //确定回调
  const handleOk = () => {
    setIsModalVisible(false);
    //不通过原因
    request
      .post('/ack/teacher/approvalFailed', {
        leaveInfoId: leaveInfoId,
        failPassExplain: gReason,
      })
      .then((res) => {
        // alert(`审批不通过成功${res}`)
        // history.push('/teacher/absence/index')
        console.log('审批不通过', res);
      })
      .catch((err) => alert(err));
  };

  //取消回调
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <div>
        学生请假
        <div className="prjName">
          姓名:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.userName}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320 }}>
          学号:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.account}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600 }}>
          院系:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.dkey}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 920 }}>
          专业:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.gkey}
          />
        </div>
        <div className="prjName" style={{ marginTop: 100 }}>
          年级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.gradeKey}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320, marginTop: 100 }}>
          班级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.name}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600, marginTop: 100 }}>
          班主任:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.teacherName}
          />
        </div>
      </div>
      <Form>
        <div className="prjName" style={{ marginTop: 190 }}>
          *主题:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 1000,
              marginLeft: 12,
            }}
            value={student.theme}
            disabled={true}
            placeholder="示例：【陈XX】因病请假1天"
            onChange={(e) => setzhuTi(e.target.value)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 38, marginTop: 260 }}>
          *开始日期:&nbsp;&nbsp;&nbsp;
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            value={student.startDateTime}
            disabled={true}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 440, marginTop: 260 }}>
          *结束日期:&nbsp;&nbsp;&nbsp;
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            value={student.endDateTime}
            disabled={true}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 38, marginTop: 330 }}>
          *请假原因:&nbsp;&nbsp;&nbsp;
          <Radio.Group
            name="radiogroup"
            defaultValue={1}
            onChange={onChangeRadio}
            disabled={true}
            value={student.reason}
          >
            <Radio name="student" checked={'病假'} value="病假">
              病假(需附医院证明)
            </Radio>
            <Radio name="teacher" value="事假">
              事假
            </Radio>
            <Radio name="admin" value="其他">
              其他
            </Radio>
          </Radio.Group>
          <TextArea
            rows={4}
            onChange={onChangeText}
            disabled={true}
            value={student.explain}
          />
        </div>

        <div className="groupName" style={{ marginLeft: 38, marginTop: 480 }}>
          *相关附件:&nbsp;&nbsp;&nbsp;
          <Upload {...props}>
            <Button icon={<UploadOutlined />} disabled={true}>
              上传文件
            </Button>
          </Upload>
        </div>

        <div className="prjName" style={{ marginTop: 580 }}>
          *审批人:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.teacherName}
          />
        </div>
      </Form>
      <div className="prjName" style={{ marginTop: 650 }}>
        <Button type="primary" style={{ marginBottom: 16 }} disabled>
          流程管理
        </Button>
        <Table columns={columns} dataSource={data} pagination={false} />
        <Button type="primary" onClick={Approved}>
          审批通过
        </Button>
        <Button onClick={FApproved}>审批不通过</Button>
        <Modal
          title="请录入不通过的原因"
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <input type="text" onChange={(e) => setgReason(e.target.value)} />
        </Modal>
        <Button onClick={back}>返回</Button>
      </div>
    </div>
  );
};

export default LeaveApplication;
